<template>
    <view style="height: 100%">
		<u-toast ref="orderErr" />
        <!-- pages/newoder/newoder.wxml -->
        <!-- 电量栏高度 -->
        <!-- <view class="" :style="'height:' + statusBarHeight + 'px; background-color: #000;'"></view> -->
        <!-- 返回栏 -->
        <!-- <view class="" style="background-color: #000">
            <view class="header">
                <u-icon @tap.native="backof" name="arrow-left" />
            </view>
        </view> -->
        <!-- 店铺名字 -->
        <view class="neworder">
            <view class="neworder-name">
                <!-- {{ markers.name }} -->
				浙江农林(C6店)
                <u-icon name="arrow" />
            </view>
            <view class="neworder-self">自提</view>
        </view>
        <view class="distance">距离您775M</view>
        <view class="Safety">
            <view class="Safety-info">查看食品安全信息</view>
            <u-icon name="arrow" />
        </view>
        <!-- 产品列表 -->
        <view class="content">
            <!-- 左边产品标题栏 -->
            <view class="content-left">
                <view
                    :class="'content-left-info ' + (selectindex == item.name ? 'selectpro' : '')"
                    @tap="selectproduct"
                    :data-name="item.name"
                    v-for="(item, index) in books"
                    :key="index"
                >
                    <image style="width: 40px; height: 40px;" :src="item.imageUrl" mode="widthFix"></image>

                    <view class="content-left-info-title">{{ item.name }}</view>
                </view>
            </view>
			<!-- 右边栏产品列表 -->
            <!-- <scroll-view class="content-right" scroll-y "> -->
			<scroll-view class="content-right" scroll-y style="height: 100vh;margin-bottom:200rpx ;">
                <view class="" v-for="(item, index) in books" :key="index">
                    <view class="content-right-title">{{ item.name }}</view>

                    <view class="content-right-info" v-for="(item, index1) in item.goods" :key="index1" @click="open(item)">
                        <view class="content-right-info-img">
                            <image
                                :src="item.imgUrl"
                                mode="widthFix"
                                style="width: 200rpx;"
                            ></image>
                        </view>

                        <view class="content-right-info-title">
                            <view class="content-right-info-title-name">{{ item.name }}</view>
                            <view class="content-right-info-title-info">{{product.size}}/{{product.ice}}/{{product.sweet}}</view>
                            <view class="content-right-info-title-btn">
                                <view class="">￥{{ item.price }}</view>
                                <!-- <icon @tap.native="addproduct($event, { item })" :data-item="item" name="add" color="rgb(255, 0, 0)" custom-style="font-size:60rpx;" /> -->
								<!-- <image v-if="total_num > 0" src="../../static/image/del/del1.png" class="mixuedel"></image> -->
								<!-- <text>{{total_num}}</text> -->
								<image src="../../static/mixuejia.png" class="mixueadd"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>

			<uni-popup ref="popup" type="bottom" background-color="#fff" :style="{borderRadius: '10px'}" class="my-popup" @change="change">
				<view class="total">
					<view class="img">
						<image class="image" style="width: 100%;" :src="goodOrderImg"></image>
					</view>
					<view class="content1">
						<view class="message">
							<view class="name"><text class="name-text">{{product.name}}</text></view>
							<view class="msg"><text class="msg-text">{{product.description}}</text></view>
							<!-- <view class="msg"><text class="msg-text">{{message.msg}}</text></view> -->
							<view class="things"><text class="things-text">{{message.things}}</text></view>
							<view class="medium"><text class="medium-text">{{message.medium}}</text></view>
							<view class="large"><text class="large-text">{{message.large}}</text></view>
						</view>
						<view class="type">
							<view class="type-text"><text>商品规格</text></view>
							<hr>
							<!-- 杯型 -->
							<view class="size">
								<view class="cup"><text class="cup-size">杯型</text></view>
								<view class="cup-size-btn">
									<view v-for="(item, index) in cupSize" :key="index" class="select">
									    <uni-radio :value="item.value" :checked="item.checked">
									        <button :class="item.label!=product.size?'custom-radio':'custom-radio-red'" @click="handleClickSize(item)">
												{{item.label}}
									        </button>
									    </uni-radio>
									</view>
								</view>
							</view>

							<!-- 温度 -->
							<view class="temp">
								<view class="ice"><text class="ice-text">温度</text></view>
								<view class="ice-temp">
									<view v-for="(item, index) in tempreture" :key="index" class="select">
										<uni-radio :value="item.value" :checked="item.checked">
										    <button :class="item.label!=product.ice?'custom-radio':'custom-radio-red'" @click="handleClickIce(item)">
												{{item.label}}
										    </button>
										</uni-radio>
									</view>
								</view>
							</view>

							<!-- 甜度 -->
							<view class="sweet">
								<view class="sugar"><text class="sugar-text">糖度</text></view>
								<view class="sugar-temp">
									<view v-for="(item, index) in sweet" :key="index" class="select">
										<uni-radio :value="item.value" :checked="item.checked">
										    <button :class="item.label!=product.sweet?'custom-radio':'custom-radio-red'" @click="handleClickSweet(item)">
												{{item.label}}
										    </button>
										</uni-radio>
									</view>
								</view>
							</view>

						</view>

						<view class="fixed-bottom">
							<hr>
							<view class="fixed-bottom-type">
								<view class="fixed-bottom-type-left">
									<view class="mount"><text class="mount-text">￥{{goodOrderPrice * total_num}}</text></view>
									<view class="deteil-msg"><text class="detail-text">{{product.size}}/{{product.ice}}/{{product.sweet}}</text></view>
								</view>
								<view class="fixed-bottom-type-right">
									<image v-if="total_num > 1" @click="delGood" class="fixed-bottom-type-del" src="../../static/image/del/del2.png"></image>
									<image v-if="total_num <= 1" @click="delGood" class="fixed-bottom-type-del" src="../../static/image/del/del1.png"></image>
									<text class="fixed-bottom-type-num">{{total_num}}</text>
									<image @click="addGood" class="fixed-bottom-type-add" src="../../static/mixuejia.png"></image>
								</view>
							</view>
							<view class="select-btn">
								<view class="buy"><button class="buy-btn" @click="buyNow">立即购买</button></view>
								<view class="shoppingcart"><button class="shoppingcart-btn" @click="productAdd">加入购物车</button></view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>

			<!-- <Popup></Popup> -->

        </view>
        <!-- 结算框 -->
        <view class="pay-container">
            <view class="pay-container-info">
                <image @click="onshowpopup" src="/static/image/vip/redbag.png" mode="widthFix"></image>
                <view class="price">合计：￥{{ total }}</view>
            </view>

            <u-button type="default" :custom-style="customStyle" @click="orderSettlement">去 结 算</u-button>
        </view>
        <!-- 弹出层 -->
        <!-- <u-popup :show="showpopup" position="bottom" custom-style="max-height:70%" @close="onClose"> -->
        <uni-popup ref="popup2" v-model="showpopup" mode="bottom" background-color="#fff">
            <view class="popupheader">
                <view class="popupheader-title">已选商品</view>
                <view class="popupheader-del" @click="delectproduct">清空购物车</view>
            </view>
            <view class="popup" v-for="(item, index) in productarr" :key="index">
                <!-- 商品图片 -->

                <view class="popupimg">
                    <image class="" :src="item.imgUrl"></image>
                </view>

                <!-- 商品信息 -->

                <view class="proname">
                    <view class="pronamename">{{ item.name }}</view>
                    <view class="pronamestate">{{item.size}}/{{item.ice}}/{{item.sweet}}</view>
                    <view class="pronameprice">￥{{ item.price * item.num }}</view>
                </view>

                <!-- 删除产品 -->

                <view class="prodel" @click="delproduct(item)" :data-item="item">
                    <image src="/static/image/del.png" mode="widthFix" style="width: 50rpx"></image>
                </view>

                <!-- 产品数量 -->

                <view class="prodel" :data-item="item">{{ item.num }}</view>

                <!-- 添加产品 -->
				<!-- 点击按钮时，改变 item 的 number，同时改变 total 的值 -->
                <view class="prodel" @click="addproduct(item)" :data-item="item">
                    <image src="/static/image/add.png" mode="widthFix" style="width: 50rpx"></image>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import Popup from './components/popup.vue'
import {baseUrl} from "../../utils/request.js";
export default {
    components: {
        Popup,
    },
    data() {
        return {
			category_img:[
				'http://192.168.233.1:9000/mixuebingcheng/2023/12/01/a1bf2e037cfb42fe894abb98b26ba345.png',
				'http://192.168.233.1:9000/mixuebingcheng/2023/12/01/a1bf2e037cfb42fe894abb98b26ba345.png',
				'http://192.168.233.1:9000/mixuebingcheng/2023/12/01/a1bf2e037cfb42fe894abb98b26ba345.png',
				'http://192.168.233.1:9000/mixuebingcheng/2023/12/01/a1bf2e037cfb42fe894abb98b26ba345.png',
				// '/static/image/icon_yk6ul1hd77l/xueren_1.png',
				// '/static/image/icon_yk6ul1hd77l/xueren_2.png',
				// '/static/image/icon_yk6ul1hd77l/xueren_3.jpg'
			],
			newOrderData:{
				userId: getApp().globalData.userInfo.id, // 当前用户登录的 id
				method: 0,
				shop: '蜜雪冰城(浙江农林C6店)',
				status: 0,
				goodNum: null,
				amount: null
			},
			customStyle: {
				backgroundColor:'red',
				color:'#fff',
				marginRight:'50rpx',
				borderRadius:'10rpx'
						},
			goodOrderImg: null,    // 存放商品订单图片
			goodOrderPrice: null,  // 存放商品订单总价格
            markers: null,
            statusBarHeight: uni.db.statusbarhright,
            //电量栏高度
            books: null,
            selectindex: '推荐套餐',
			// 定义 product，用于新增商品
			product: {
				id: null,    // 商品 id，建立索引
				userId: getApp().globalData.userInfo.id, // 当前用户登录的 id
				name: null,  // 商品名称
				imgUrl: null,// 商品图片
				price: null, // 商品单价
				number: null ,// 商品数量
				ice: "正常冰",    // 温度
				sweet: "正常糖",  // 甜度
				size: "中杯"    // 杯型
			},
            productarr: [],
            total: 0,
            showpopup: false,
			total_num: 0,
			goodname: "珍珠奶茶",
			message:{
			    msg: "珍珠Q弹，奶茶经典",
			    things: "珍珠、浓缩奶茶(红茶叶，奶茶粉)",
				medium: "杯容量505ml",
				large: "杯容量660ml"
			},
			cupSize: [
			    { label: '小杯', value: '1', checked: false },
			    { label: '中杯', value: '2', checked: false },
			    { label: '大杯', value: '3', checked: false }
			],
			tempreture: [
				{label: '正常冰'},
				{label: '少冰'},
				{label: '热'}
			],
			sweet: [
				{label: '正常糖'},
				{label: '七分糖'},
				{label: '五分糖'}
			]
        };
    },
	
	
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // console.log(options);
        // console.log(options.query)
        let that = this;
        const eventChannel = this.getOpenerEventChannel();
		console.log(getApp().globalData.userInfo)

        uni.request({
            // url: 'https://www.fastmock.site/mock/68c3c014a443685834fb331ec92e7e9d/show/shop',
            url: baseUrl+'/mixuebingcheng/category/withGood',
            success: (res) => {
                console.log('neworder.vue 301');
                console.log(res.data.data);
                this.setData({
                    books: res.data.rows,
					
                });
            }
        });
		
		this.getShoppingCart();
		
    },
    onShareAppMessage() {},
    methods: {
		clearProductArr(){
			this.total = 0;
			this.productarr.length = 0;
		},
		buyNow(){
			this.clearProductArr()
			let newProduct = {
				name: this.product.name,  // 商品名称
				imgUrl: this.product.imgUrl,// 商品图片
				price: this.product.price, // 商品单价
				num: this.total_num ,// 商品数量
				ice: this.product.ice,    // 温度
				sweet: this.product.sweet,  // 甜度
				size: this.product.size,   // 杯型
				userId: getApp().globalData.userInfo.id, // 当前登录用户 id
				goodId: this.product.id,
				status: 1,
				amount: null,
			}
			newProduct.num = this.total_num
			newProduct.amount = newProduct.num * newProduct.price
			console.log('newProduct',newProduct)
			uni.request({
				url: baseUrl + '/mixuebingcheng/test/buyNow',
				method: 'POST',
				data: newProduct,
				success(res) {
					console.log('buyNow',res)
					uni.switchTab({
						url:'/pages/form/form'
					})
				},
				fail(res) {
					// console.log('请求失败', res)
				}
			})
		},
		getShoppingCart(){
			// 展示商品
			uni.request({
				url: baseUrl+'/mixuebingcheng/cart/selectAllCarts',
				data: {
					id: getApp().globalData.userInfo.id,
				},
				success: (res) => {
					console.log("以下是购物车数据")
				 //    console.log(res);
				    console.log(res.data);
				    this.setData({
				        productarr: res.data.data
				    });
					// 给 total 赋值
					this.total=0
					for(let i = 0; i < res.data.data.length; i++){
						this.total = this.total + res.data.data[i].num * res.data.data[i].price
					}
					// console.log(this.total)
				}
			})
		},
		async orderSettlement(){
			console.log('orderSettlement')
			
			console.log(this.newOrderData)
			// console.log(this.productarr)
			if(this.productarr.length!=0){
				let sumNum = 0
				this.productarr.forEach(e=>sumNum+=e.num)
				this.newOrderData.goodNum = sumNum
				this.newOrderData.amount = this.total
				const temp = await new Promise((resolve,reject)=>{
					uni.request({
						url: baseUrl+'/mixuebingcheng/test',
						method: 'post',
						data: this.newOrderData,
						success(res) {
							console.log('请求成功',res.data)
							resolve(res.data)
						},
						fail(res) {
							reject(res.data)
							
						}
					})
				}
				).then((res)=>{
					if(res){
						this.getShoppingCart();
						uni.switchTab({
							url:'/pages/form/form'
						})
					}
				}).then(()=>{
					
				}).catch(res=>{
					this.$refs.orderErr.show({
						title: res.data.msg,
						type: 'error',
						
					})
				})
				// console.log(temp)
				// this.getShoppingCart();
			}
			else
				this.$refs.orderErr.show({
					title: '请先选择商品',
					type: 'error',
					
				})
		},
		handleClickSize(item){
			// 解决对 product 赋值
			this.product.size = item.label
			
			// 解决按钮点击样式，

		},
		
		handleClickIce(item){
			// 解决对 product 赋值
			this.product.ice = item.label
			console.log(this.product.ice)
			
			// 解决按钮点击样式
			
		},
		
		handleClickSweet(item){
			// 解决对 product 赋值
			this.product.sweet = item.label
			console.log(this.product.sweet)
			
			// 解决按钮点击样式
			
			
		},
		
		change(e) {
			console.log(e.show)
			// 当购物车有数据时不能将 total_num 置0
			if(e.show === false){
				this.total_num = 0
			}
		},

        backof() {
            uni.navigateBack({
                delta: 1
            });
        },

		open(item){
		    // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		    this.$refs.popup.open()
			this.total_num = this.total_num + 1
			// console.log(this.total_num)
			// console.log(item)
			// 将选中的商品参数放到 goodOrder 中
			this.goodOrderImg = item.imgUrl
			// console.log(this.goodOrderImg)
			this.goodOrderPrice = item.price * this.total_num
			// console.log(this.goodOrderPrice)
			
			// 点击 open 将相应商品放入 product 对象中
			this.product.id = item.id
			this.product.name = item.name
			this.product.imgUrl = item.imgUrl
			this.product.description = item.description
			// this.product.number = this.total_num  // number 等点击 “加入购物车” 后再赋值
			this.product.price = item.price
			// this.product.size = item.size     // size，sweet，ice 没必要现在赋值，要点击按钮后赋值
			// this.product.sweet = item.sweet
			// this.product.ice = item.ice
			console.log(this.product)
		},
		
		addGood(){
			this.total_num = this.total_num + 1
		},
		
		delGood(){
			if(this.total_num > 1){
				this.total_num = this.total_num - 1
				// this.$refs.popup.close()
			}
		},

        selectproduct(e) {
            //选中左边标题栏
            // console.log(e.currentTarget.dataset.name);
            const selectindex = e.currentTarget.dataset.name || '推荐套餐';
            this.setData({
                selectindex
            });
        },
		
		productAdd(){
			// 解决 productarr 问题，要加入 imgUrl、name、price、number
			// 方法：定义对象和数组，当点击加入购物车时，出发函数
			// 点击 open 时改变 product 对象中的值，然后点击购物车才能 push 到 productarr 中
			// 记得计算 total，总消费金额
			
			// 创建新的 product
			
			let newProduct = {
				name: this.product.name,  // 商品名称
				imgUrl: this.product.imgUrl,// 商品图片
				price: this.product.price, // 商品单价
				num: this.total_num ,// 商品数量
				ice: this.product.ice,    // 温度
				sweet: this.product.sweet,  // 甜度
				size: this.product.size,   // 杯型
				userId: getApp().globalData.userInfo.id, // 当前登录用户 id
				goodId: this.product.id,
				status: 1,
				amount: null,
			}
			newProduct.num = this.total_num
			newProduct.amount = newProduct.num * newProduct.price
			// console.log(newProduct.num)
			this.productarr.push(newProduct)
			this.total = this.total + newProduct.num * newProduct.price
			// console.log(this.product)
			// console.log(this.productarr)
			
			
			// 将数据添加到数据库
			uni.request({
				url: baseUrl + '/mixuebingcheng/cart/addCarts',
				method: 'post',
				data: newProduct,
				success(res) {
					console.log('请求成功',res.data)
				},
				fail(res) {
					console.log('请求失败', res)
				}
			})
			
			// 关闭弹出层
			this.$refs.popup.close()
		},

		
		addproduct(item){
			console.log(this.total)
			item.num = item.num + 1
			this.total = this.total + parseInt(item.price)
			console.log("下面是修改后数据查看")
			console.log(item)
			
			// 操作数据库，对该商品进行修改
			uni.request({
				url: baseUrl+'/mixuebingcheng/cart/updateCarts',
				method: 'post',
				data: item,
				success(res) {
					console.log('数据修改成功',res.data)
				},
				fail(res) {
					console.log('数据修改失败', res)
				}
			})
			
		},
		
		delproduct(item){
			console.log(item)
			if(item.num > 0){
				item.num = item.num - 1
				this.total = this.total - parseInt(item.price)
				
				// 操作数据库，对该商品进行修改
				uni.request({
					url: baseUrl+'/mixuebingcheng/cart/updateCarts',
					method: 'post',
					data: item,
					success(res) {
						console.log('数据修改成功',res.data)
					},
					fail(res) {
						console.log('数据修改失败', res)
					}
				})
				
				if(item.num === 0){
					// 商品数量等于0，则踢出列表
					let objectToRemove = item
					// 使用 filter() 创建一个新数组，不包含要删除的对象
					var newArray = this.productarr.filter(function(item) {
					  return item !== objectToRemove;
					});
					this.productarr = newArray
					console.log(this.productarr)
				}
				
			}
			console.log(this.total)
		},
		
		

        onClose() {
            this.setData({
                showpopup: false
            });
        },

        onshowpopup() {
			console.log(1)
            if (this.productarr.length > 0) {
			// if (true) {
				this.$refs.popup2.open()
                this.setData({
                    showpopup: true
                });
				
            }
			
        },

		// 清空购物车
        delectproduct() {
            this.setData({
                showpopup: false,
                total: 0
            });
			let updateCart = this.productarr
			this.productarr = []
			// 清空数据库数据，将 status 设为 -1
			for(let i = 0; i < updateCart.length; i++){
				updateCart[i].status = -1;
				uni.request({
					url: baseUrl+'/mixuebingcheng/cart/updateCarts',
					method: 'POST',
					data: updateCart[i],
					success(res) {
						console.log("修改数据成功！", res)
					},
					fail(res) {
						console.log("修改数据失败", res)
					}
				})
			}
			
        },

        getprodctname(arr, name) {
            if (arr.length == 0) {
                return -1;
            }
            console.log(arr.length);
            for (let i = 0; i < arr.length; i++) {
                console.log(arr[i].title);
                if (arr[i].title === name) {
                    return i;
                }
            }
            return -1;
        }
    }
};
</script>
<style>

.mixueadd{
	width: 20px;
	height: 20px;
}
.mixuedel{
	width: 20px;
	height: 20px;
}
/* pages/newoder/newoder.wxss */
.header {
    height: 80rpx;
    text-align: center;
    font-weight: bolder;
    line-height: 80rpx;
    background: #fff;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    display: flex;
    justify-content: left;
    padding: 0 30rpx;
}
.neworder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15rpx 30rpx;
}
.neworder-name u-icon {
    margin-top: 8rpx;
}
.neworder-name {
    display: flex;
    align-items: center;
    justify-content: center;
}
.neworder-self {
    background: rgb(255, 0, 0);
    color: #fff;
    font-size: 25rpx;
    padding: 10rpx 30rpx;
    border-radius: 10rpx;
}
.distance {
    color: #acacac;
    font-size: 25rpx;
    padding-left: 30rpx;
    margin-top: -10rpx;
}
.Safety {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30rpx;
    color: #acacac;
    font-size: 20rpx;
    padding-left: 30rpx;
}
.content {
    display: flex;
}
.content-left {
    width: 23vw;
    background: #f3f3f3;
    height: 80vh;
}
.content-left-info {
    height: 130rpx;
    text-align: center;
    padding: 10rpx 0;
	padding-top: 10px;
}
.content-left-info image {
    width: 90rpx;
}
.content-left-info-title {
    font-size: 20rpx;
    margin-top: -10rpx;
	/* padding-top: 10px; */
}
.content-right {
    width: 77vw;
    box-sizing: border-box;
    overflow: auto;
}
.content-right-title {
    padding-left: 20rpx;
    font-size: 20rpx;
}

.content-right-info {
    padding: 10rpx 20rpx;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    overflow: hidden;
}
.content-right-info-img {
    width: 180rpx;
	height: 180rpx;
    overflow: hidden;
    margin-right: 20rpx;
}
.content-right-info-title {
    flex: 1;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.content-right-info-title-name {
    font-weight: bold;
    font-size: 25rpx;
}
.content-right-info-title-info {
    color: #acacac;
    font-size: 28rpx;
}
.content-right-info-title-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: red;
}
.pay-container {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20rpx 10rpx;
    background: #fff;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.pay-container-info {
    display: flex;
    align-items: center;
}
.pay-container .pay-container-info image {
    width: 100rpx;
}
.selectpro {
    background: rgb(172, 171, 171);
    position: relative;
}
.selectpro::before {
    display: flex;
    content: '';
    color: red;
    width: 10rpx;
    height: 80rpx;
    background-color: red;
    position: absolute;
    top: 30rpx;
}
.popupheader {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 30rpx;
    align-items: center;
}
.popupheader-title {
    font-size: 40rpx;
    font-weight: bold;
}
.popupheader-del {
    font-size: 25rpx;
    color: #acacac;
}
.popup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx;
}
.popupimg {
    width: 150rpx;
    overflow: hidden;
    height: 150rpx;
    border-radius: 25rpx;
}
.popupimg image {
    width: 210rpx;
    height: 150rpx;
    margin-left: -20rpx;
}
.proname {
    font-size: 30rpx;
    color: #acacac;
    max-width: 300rpx;
    display: flex;
    flex-direction: column;
}
.proname .pronamename {
    font-size: 35rpx;
    font-weight: bold;
    color: #000;
}
.pronameprice {
    color: #000;
}


.my-popup{
	/* border-radius: 20px; */
	overflow:hidden;
	}
	.total{
		
		/* border-radius: 10px; */
		height: 450px;
		overflow: auto;
		/* border-radius: 20px; */
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}
	.content1{
		position: relative; /* 设置一个相对定位的父容器 */

	}
	.custom-radio {
	  /* 自定义样式，可以根据需要修改 */
		display: inline-block;
	    margin-right: 10px;
	}
	.custom-radio-red {
	  /* 自定义样式，可以根据需要修改 */
		display: inline-block;
		background-color: #fbdfe2;
		border:1px solid red;
	    margin-right: 10px;
		color:red;
	}
	.message{
		/* height: 100px; */
		padding-left: 10px;
		margin-bottom: 40px;
	}
	.name{
		font-size: 20px;
		font-weight: bold;
		margin-top: 10px;
		margin-bottom: 15px;
	}
	.msg{
		font-size: 14px;
		color: #B3B3B3;
	}
	.things{
		font-size: 14px;
		color: #B3B3B3;
	}
	.medium{
		font-size: 14px;
		color: #B3B3B3;
	}
	.large{
		font-size: 14px;
		color: #B3B3B3;
	}
	.type{
		margin-bottom: 200px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.type-text{
		margin-bottom: 10px;
		font-size: 18px;
	}
	.cup{
		margin-top: 10px;
		color: #B3B3B3;
		margin-bottom: 10px;
	}
	.cup-size-btn{
		display: flex;
	}
	.temp{
		margin-top: 10px;
		margin-bottom: 10px;
		color: #B3B3B3;
	}
	.ice-temp{
		display: flex;
	}
	.sugar-temp{
		display: flex;
	}
	.sweet{
		margin-top: 10px;
		color: #B3B3B3;
	}
	.select{
		display: flex;
	}
	.fixed-bottom {
	    position: fixed; /* 让 view 固定在底部 */
	    bottom: 0; /* 距离底部为 0 */
	    width: 100%; /* 宽度为 100% */
	    background-color: #FFFFFF;
		height: 150px;
	}
	.fixed-bottom-type{
		display: flex;
		position: relative;
	}
	.fixed-bottom-type-left{
		flex: 1;
	}
	.fixed-bottom-type-right{
		flex: 1;
		/* background-color: aqua; */
	}
	.fixed-bottom-type-add{
		position: absolute;
		width: 25px;
		height: 25px;
		right: 10px;
		top: 20px;
	}
	.fixed-bottom-type-num{
		position: absolute;
		top: 20px;
		right: 50px;
		font-size: 17px;
	}
	.fixed-bottom-type-del{
		position: absolute;
		width: 25px;
		height: 25px;
		top: 20px;
		right: 75px;
	}
	.mount{
		padding-left: 10px;
		padding-top: 10px;
	}
	.mount-text{
		font-size: 18px;
		font-weight: bold;
	}
	.deteil-msg{
		padding-left: 10px;
		margin-bottom: 20px;
	}
	.detail-text{
		font-size: 14px;
		color: #B3B3B3;
	}
	.select-btn{
		display: flex;
		padding-left: 10px;
		padding-right: 10px;
	}
	.buy{
		flex: 1;
		margin-right: 10px;
	}
	.shoppingcart{
		flex: 1;
	}
	hr{
		border: none;
		border-top: 1px solid rgba(200,178,170, 0.2);
	}
</style>
